<template>
    <div class="draggable">
        <Draggable
            v-model="tableData"
            animation="500"
            @start="onStart"
            @end="onEnd">
            <div class="items" v-for="(item, index) in tableData" :key="index">
                {{ item.name }}
            </div>
        </Draggable>
    </div>
</template>
<script>
import Draggable from "vuedraggable"
export default {
    components: { Draggable },
    data () {
        return {
            test: 'V1.0.1',
            tableData: [
                {
                    name: "张三",
                    test: "我是张三",
                },
                {
                    name: "李四",
                    test: "我是李四",
                },
                {
                    name: "王五",
                    test: "我是王五",
                },
            ],
        }
    },
    methods: {
        onStart () {
            console.log("开始拖拽")
        },
        onEnd () {
            console.log("结束拖拽")
            console.log(this.tableData)
        },
    },
};
</script>
<style scoped>
.draggable {
    padding: 20px;
}
.items {
    width: 200px;
    text-align: center;
    border: 1px solid #ccc;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    cursor: pointer;
}
</style>
